<template>
  <div id="login">
    <div class="container">
      <div class="card"></div>
      <div class="card">
        <h1 class="title">用户登录</h1>

        <div class="input-container">
          <input type="text" id="loginId" v-model="login.userName" />
          <label for="loginId">用户名</label>
          <div class="bar"></div>
        </div>
        <div class="input-container">
          <input type="password" id="pwd" v-model="login.userPwd" />
          <label for="pwd">密码</label>
          <div class="bar"></div>
        </div>
        <div class="button-container">
          <button @click="userlogin"><span>登录</span></button>
        </div>
      </div>
      <div class="card alt">
        <div class="toggle"></div>
        <h1 class="title">
          会员注册
          <div class="close"></div>
        </h1>

        <div class="input-container">
          <input type="text" id="registerLoginId" v-model="register.registerLoginId" />
          <label for="registerLoginId">用户名</label>
          <div class="bar"></div>
        </div>
        <div class="input-container">
          <input type="text" id="registerPwd" v-model="register.registerPwd" />
          <label for="registerPwd">密码</label>
          <div class="bar"></div>
        </div>
        <div class="input-container">
          <input type="text" id="registerPwdtow" v-model="register.registerPwdtow" />
          <label for="registerPwdtow">确认密码</label>
          <div class="bar"></div>
        </div>
        <div class="button-container">
          <button @click="userregister"><span>提交注册</span></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import show from '../assets/js/script';
import { mapActions } from 'vuex';
import { getStorage, setStorage, removeStorage } from '../assets/js/storage';

export default {
  data() {
    return {
      login: {
        userName: '00004',
        userPwd: '123123',
      },
      register: {
        registerLoginId: null,
        registerPwd: null,
      },
      test: 'yes',
    };
  },
  methods: {
    ...mapActions(['tongyong', 'saveUser']),

    userregister() {
      console.log(this.$getStorage);
    },

    userlogin() {
      if (this.login.userName == null || this.login.userPwd == null) {
        console.log(sessionStorage);
        this.$message({
          showClose: true,
          message: '密码或账号为空',
          type: 'warning',
        });
      } else {
        console.log(this.login);
        this['saveUser']({
          name: 'LOGIN',
          data: this.login,
        }).then(resp => {
          console.log(resp);
          // setStorage('token', resp.data.data[0]);
          this.$router.push({ path: 'home' });
        });
      }
    },
  },
  mounted() {
    show.show();
  },
};
</script>

<style src="../assets/css/font-awesome.min.css" scoped></style>
<style src="../assets/css/style.css" scoped></style>
